<template>
	<div class="bindphone">
		<div class="bindphone-title">为保证您的账号安全，请去绑定手机号</div>
		<ul class="login-from1">
			<li :class="{'active':telimgshow}">
				<span><img src="../../img-login/icon_phone_dis@3x.png"/></span>
				<span><img src="../../img-login/icon_phone_sel@3x.png"/></span>
				<input type="number" name="" id="" value="" placeholder="请输入手机号码" v-model="tel" @focus="telimgshow=!telimgshow" @blur="telimgshow=!telimgshow"/>
				<span><img src="../../img-login/icon_close@3x.png" @click="qingchu('t')" v-show="tel"/></span>
			</li>
			<li class="login-yzm" :class="{'active':yzmimgshow}">
				<span><img src="../../img-login/icon_check_dis@3x.png"/></span>
				<span><img src="../../img-login/icon_check_sel@3x.png"/></span>
				<input type="number" name="" id="" value="" placeholder="请输入验证码" v-model="yzm" @focus="yzmimgshow=!yzmimgshow" @blur="yzmimgshow=!yzmimgshow"/>
				<span @click="hqyzm()" v-if="yzmshow">获取验证码</span>
				<span v-else class="cxfs" v-html="djsyzm"></span>
			</li>
		</ul>
		<div class="bindsend" @click="bindsend()">绑定</div>
	</div>
</template>

<script>
//	import logincss from "@/css/login.css"
	export default{
		name:'bindphone',
		data () {
			return{
				user:0,
				yzmshow:true,
				tel:"",
				yzm:"",
				djsyzm:"",
				telimgshow:false,
				yzmimgshow:false
			}
		},
		created:function(){
			if(!(localStorage.getItem('nt_user'))){
				this.$router.push({path:'/login'});
			}else{
				this.user=localStorage.getItem('nt_user');
			}
		},
		methods:{
			bindsend:function(){
				var self=this;
				if(this.yzm&&this.tel.length==11){
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax_third_login&act=binding_other",
						data:{'token':self.user,'phone_mob':self.tel,'confirm_code':self.yzm},
						dataType:'json',
						success:function(res){
							if(res.done){
								localStorage.setItem('nt_user',res.retval.token);
								localStorage.setItem("nt_stute",res.retval.dst_status);
								history.go(-1);
							}
						}
					});
				}
			},
			hqyzm:function(){
				var self=this;
				if(this.tel&&this.tel.length==11){
					this.yzmshow=false;
					self.djsyzm='60秒后<br />重新发送';
					for(var i=60;i>0;i--){
						(function(i){
							var a=i;
							var b=60;
							setTimeout(function(){
								self.djsyzm=b-a+'秒后<br />重新发送';
								if(a==60){
									self.yzmshow=true;
								}
							},i*1000);
						})(i);
					};
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax_third_login&act=wx_binding_code",
						data:{"phone":self.tel},
						dataType:"json",
						success:function(res){
							console.log(res);
						}
					});
				}
			},
			qingchu:function(item){
				if(item=="t"){
					this.tel="";
				}
			},
		},
		mounted:function(){
			
		}
	}
</script>

<style>
	.bindphone{font-size:0;height:100%;background-color:#fff;}
	.bindphone-title{height:0.88rem;background-color:#CDF2C1;text-align: center;line-height: 0.88rem;font-size:0.28rem;color:#666;margin-bottom: 0.9rem;}
	.login-from1{padding:0 0.8rem;box-sizing: border-box;}
	.login-from1 li{position:relative;}
	.login-from1 li img{width:0.44rem;height:0.44rem;}
	.login-from1 li span{display: inline-block;float:left;margin-right: 0.23rem;margin-top: 0.1rem;}
	.login-from1 li span:nth-child(2){display: none;}
	.login-from1 li:first-child {margin-bottom: 0.49rem;}
	.login-from1 li:first-child span:last-child{position:absolute;right:0;top:0.14rem;margin-top:0;border-radius:50%;font-size:0;}
	.login-from1 li:first-child span:last-child>img{width:0.42rem;height:0.42rem;float:right;}
	.login-from1 li:nth-child(2) span:last-child>img{width:0.42rem;height:0.42rem;float:right;}
	.login-from1 li>input{height:0.7rem;border-bottom: 1px solid #eee;font-size:0.32rem;width:4.82rem;color:#999;padding-left:0.32rem;}
	.login-from1 li.login-yzm span:last-child{font-size:0.26rem;line-height:0.26rem;color:#A3A5A7;padding-left: 0.16rem;border-left:1px solid #eee;position:absolute;right:0;bottom:0.26rem;display: inline-block;width:1.42rem;text-align: center;}
	.login-yzm1 .cxfs{bottom:0.12rem !important;color:#8DB87E !important;}
	.bindsend{width:6.86rem;height:1rem;border-radius:0.5rem;text-align: center;line-height: 1rem;background-color:#4C9D31;color:#fff;font-size:0.36rem;margin:0.8rem auto 0rem;letter-spacing: 0.2rem;padding-left: 0.2rem;box-sizing: border-box;}
</style>